<template>
    
    <div>
        <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
        
        
        <el-row :gutter="20">

                <el-col :span=8>
                    <el-card>
                        <div slot="header" style="line-height:40px">
                            <span style="margin-left:0px">留言列表<el-button style="float:right">刷新</el-button></span>
                            
                        </div>

                        <el-table
                            :data="messages"
                            style="width: 100%"
                            height=337
                            border
                            highlight-current-row
                            @current-change="select"
                        >

                            <el-table-column
                                prop="username"
                                label="用户名"
                                width="100">
                            </el-table-column>

                            <el-table-column
                                prop="subject"
                                label="主题">
                            </el-table-column>

                            

                        </el-table>

                    </el-card>
                </el-col>

                <!-- <el-col :span=8>
                    <el-card>
                        <mavon-editor
                            v-model="oldArticle"
                            :toolbarsFlag="false"
                            :editable="false"
                            :subfield="false"
                            :defaultOpen="'preview'"
                        />
                    </el-card>
                </el-col> -->

                

                <el-col :span=16>
                    <el-card style="height:454.8px">

                        <div slot="header">
                            <span style="margin-left:0px">留言内容</span>
                        </div>

                        <div>
                            <form>
            <div class="form-row">
              <div class="form-group col-md-6" style="margin-bottom: 10px"> <input type="text" v-model="message.username" class="form-control" id="form22" placeholder="用户名*"> </div>
              <div class="form-group col-md-6" style="margin-bottom: 10px"> <input type="email" v-model="message.email" class="form-control" id="form23" placeholder="e-mail*"> </div>
            </div>
            <div class="form-group" style="margin-bottom: 10px"> <input type="text" v-model="message.subject" class="form-control" id="form25" placeholder="主题*"> </div>
            <div class="form-group" style="margin-bottom: 10px"> <textarea v-model="message.content" class="form-control" id="form26" rows="7" placeholder="内容"></textarea> </div> 
            <button type="button" style="margin-right: 20px" class="btn btn-success" @click="reply">回复</button>
            <button type="button" class="btn btn-danger" @click="deleteMessage">删除</button>
          </form>

                        </div>
                        
                    </el-card>
                </el-col>

            </el-row>

    </div>

</template>

<script>
// import 'bootstrap/dist/css/bootstrap.min.css'
// import 'bootstrap/dist/js/bootstrap.min.js'
import request from "@/api/client.js"

export default {
    name: 'Message',
    data() {
        return {
            message: {
                username: '',
                email: '',
                subject: '',
                content: ''
            },
            messages:[]
        }
    },
    
    mounted() {
        request.listMessages().then(resp => {
            this.messages = resp.data.data.messages
        })
    },

    methods: {

        select(currRow) {
            console.log(currRow)
            this.message = currRow
        },

        reply() {

            this.$prompt('回复', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
            }).then(({ value }) => {
                // 发送邮件
                let reply = {
                    messageId: this.message.id,
                    to: this.message.email,
                    content: value
                }
                request.replyMessage(reply).then(resp => {
                    this.$message({
                        type: 'success',
                        message: '已回复'
                    });

                    this.deleteMessage()
                })
                

            })
      

        },

        // 删除留言
        deleteMessage() {
            
            for(let index in this.messages) {
                if(this.messages[index].id == this.message.id) {
                    this.message = {username: ''}
                    this.messages.splice(index, 1)
                }
            }
        }
        
    }
}
</script>

<style>


</style>